<template>
  <div class="home">
    <!-- 1.0 头部 -->
    <div class="header">
      <div class="logo"><i class="iconfont iconnew"></i></div>
      <router-link to="/search" class="search">
        <i class="iconfont iconsearch"></i>
        <span>搜索新闻</span>
      </router-link>
      <span class="user" @click="loginFn">
        <i class="iconfont iconwode"></i>
      </span>
    </div>
    <!-- 2.0 Tab 标签页 sticky 自动吸顶 -->
    <van-tabs v-model="active" sticky swipeable class="home-tabs">
      <van-tab v-for="item in categoryList" :key="item.id" :title="item.name">
        <!-- List 列表分页组件 -->
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <MyPost
              v-for="item2 in item.postList"
              :key="item2.id"
              :post="item2"
            ></MyPost>
            <van-empty v-if="!item.postList.length" description="空空如也" />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCategoryAPI } from "../apis/category";
import { getPostAPI } from "../apis/news";
import { getCate, getToken, getUserId } from "../utils/localData";
import MyPost from "../components/MyPost.vue";
export default {
  components: {
    MyPost,
  },
  data() {
    return {
      // 默认情况下，都是让头条项高亮，有 token 的话头条的下标是 1
      active: getToken() ? 1 : 0,
      // 栏目列表 - 优先读取存储中的列表
      categoryList: getCate(),
      // 新闻列表
      // postList: [],
    };
  },
  async created() {
    // 本地存储没有栏目数据
    if (this.categoryList.length === 0) {
      // 获取栏目数据
      const res = await getCategoryAPI();
      console.log(res);
      //  // 🔔 把后端返回的数据进行改造
      this.categoryList = res.data.data;
    } else {
      // 本地存储 - 没有关注和头条项目
      // 已登录 - 添加关注和头条 2 项
      if (getToken()) {
        this.categoryList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        //  未登录 - 添加 头条 1 项
        this.categoryList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    }
    // 🔔 不管使用的是本地的数据,还是请求回来的数据,都需要通过 map 处理
    this.categoryList = this.categoryList.map((item) => {
      return {
        ...item, // 保留后端返回的栏目数据，
        postList: [], // 每个栏目都有的新闻数据
        pageIndex: 1, // 每个栏目都有页码
        pageSize: 2, // 每个栏目都有页容量
        loading: false, // loading=true，则显示 加载中... 提示，不会触发 onLoad 事件了
        finished: false, // finished=true，则显示 没有更多了 提示，也不会触发 onLoad 事件了，级别比 loading 更高
        isLoading: false, // isLoading=true，显示 下拉组件 的加载中提示
      };
    });
    // 调用封装后的获取列表数据函数
    this.getPostListData();
  },
  // 注意点1：获取到DOM元素，需要在组件挂载完毕后
  mounted() {
    // 获取添加伪元素的标签
    const tabsDOM = document.querySelector(".van-sticky");
    // 注意点2：注意用箭头函数，否者this 会出问题
    tabsDOM.addEventListener("click", (e) => {
      // e.target 触发事件的真实DOM 元素
      console.log("你点击了 van-sticky", e.target);
      if (e.target.className.indexOf("van-sticky") !== -1) {
        console.log("你点击了加号，跳转到栏目页");
        // 跳转到栏目管理也
        this.$router.push({ path: "/category" });
      } else {
        console.log("点击了栏目");
      }
    });
  },
  methods: {
    loginFn() {
      //  获取用户 id
      const id = getUserId();
      if (id) {
        // 跳转用户中心的时候，一定要携带上用户的 id
        this.$router.push({ path: "/user", query: { id } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    // 下拉刷新组件触发的函数
    onRefresh() {
      // console.log("onRefresh下拉时触发的函数");
      // 清空所有的新闻
      this.categoryList[this.active].postList = [];
      // 页码重置为 1
      this.categoryList[this.active].pageIndex = 1;
      // 隐藏分页组件的加载完成提示
      this.categoryList[this.active].finished = false;
      // 💥 将 loading 设置为 true，表示处于 List 加载状态
      this.categoryList[this.active].loading = true;
      // 根据新的页码，重新请求数据
      this.getPostListData();
    },
    // 当列表即将滚动到底部时，自动触发onLoad函数
    onLoad() {
      // console.log("列表即将滚动到底部时");
      // 当前栏目页码 +1
      this.categoryList[this.active].pageIndex++;
      // 根据最新页码再请求栏目数据
      this.getPostListData();
    },
    // 获取新闻列表数据
    async getPostListData() {
      // 根据栏目选中的栏目获取请求时所需的 id
      // const activeCateId = this.categoryList[this.active].id;
      // const pageIndex = this.categoryList[this.active].pageIndex;
      // const pageSize = this.categoryList[this.active].pageSize;
      // 👍 从当前栏目中解构数据 this.categoryList[this.active]
      const {
        id: category,
        pageIndex,
        pageSize,
        postList,
      } = this.categoryList[this.active];
      console.log("当前栏目的数据", {
        category,
        pageIndex,
        pageSize,
        postList,
      });
      // 根据栏目 id 获取栏目对应的新闻
      const res2 = await getPostAPI({
        category,
        pageIndex,
        pageSize,
      });
      // console.log(res2);
      // 新闻的数据绑定
      // this.postList = res2.data.data;
      // 如果后端返回的数组已经为空(没有更多数据了)
      if (res2.data.data.length === 0) {
        // 需要主动显示加载完毕，finished = true，onLoad 就不会再触发了
        this.categoryList[this.active].finished = true;
      }
      // 把栏目对应的新闻放到栏目数组内
      postList.push(...res2.data.data);
      // 数据加载完毕后，需要主动隐藏加载中的提示
      this.categoryList[this.active].loading = false;
      // 需要主动隐藏下拉插件的加载中的提示
      this.categoryList[this.active].isLoading = false;
    },
  },
  // 监听栏目下标的变化
  watch: {
    active() {
      // console.log("active下标变化了", this.active);
      // 💥 如果点开了新的栏目，才需要进行加载栏目数据
      if (this.categoryList[this.active].postList.length === 0) {
        // 调用封装后的获取列表数据函数
        this.getPostListData();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-tabs {
  // 在 tabs 标签栏上右侧添加一个图标，用于进入栏目管理页面
  /deep/ .van-sticky {
    padding-right: 40px;
    &::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 0;
      font-size: 30px;
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
  }
}

.header {
  height: 50px;
  background-color: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
  .logo {
    width: 70px;
    text-align: center;
    .iconnew {
      font-size: 50px;
    }
  }

  .search {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.4);
    height: 34px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconsearch {
      margin-right: 5px;
      margin-top: 4px;
    }
  }

  .user {
    width: 70px;
    text-align: center;
    color: #fff;
    .iconwode {
      font-size: 30px;
    }
  }
}
</style>